<template>
    <div class="view-module-goods">
        <div class="view-goods" v-if="info.ids">
            <div class="goods-item" v-for="(item, index) in goods_list" :key="index">
                <div class="gmimg-box">
                    <img class="gmimg" :src="$imgUrl + item.thumb" alt="" />
                    <!-- <div class="sg-tag-list gmlist">
                        <div class="sg-tag-item" v-if="item.act_tag && item.act_tag.length > 0">{{
            item.act_tag[0] }}</div>
                    </div> -->
                </div>
                <div class="gmname-box">
                    <div class="gmname">{{ item.name }}</div>
                </div>
                <div class="price-box">
                    <div class="price-content">
                        <img class="pbg"
                            :src="info.bg_img ? ($imgUrl + info.bg_img) : 'https://img.hltmsp.com/bd/09/29/bd092996d26955bfb75c3a1d562ceb95.png'" alt="">
                        <div class="pmain">
                            <div class="pml">
                                <span class="pmi" v-if="item.act_tag && item.act_tag.length > 0"
                                :style="{color: info.txt_color}"
                                >{{ item.act_tag[0] }}</span>
                            </div>
                            <div class="pmr"
                            :style="{color: info.price_color}"
                            >
                                {{ item.activity_price }}
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="view-img-box" v-else>
            <empty icon="Picture" name="轮播商品模块" />
        </div>
    </div>
</template>

<script setup name="BannerGoods">
import empty from '../empty.vue'

const { proxy } = getCurrentInstance()
const props = defineProps({
    info: { required: true },
});

const data = reactive({
    goods_list: []
})
const { goods_list } = toRefs(data)

watch(() => props.info.ids, (val) => {
    getGoods(val)
})
onMounted(() => {
    getGoods(props.info.ids)
})

async function getGoods(ids) {
    if (!ids) return
    let res = await proxy.$post('MallPageGoods', {
        ids
    }, false)
    if (res.code === 0) {
        data.goods_list = res.data || []
    }
}


</script>
<style lang="scss" scoped>
.view-module-goods {
    padding: 0 10px;

    .view-goods {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;

        .goods-item {
            height: 185px;
            border-radius: 4px;
            background-color: #fff;
            position: relative;

            .gmimg-box {
                width: 100%;
                padding-top: 100%;
                position: relative;
            }

            .gmimg {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
            }

            // .gmlist {
            //     width: 100%;
            //     height: 33px;
            //     position: absolute;
            //     bottom: 0;
            //     left: 0;
            //     z-index: 1;
            // }

            // .sg-tag-list {
            //     display: flex;
            //     align-items: center;
            //     justify-content: center;
            //     flex-wrap: nowrap;
            //     max-height: 18px;
            //     overflow: hidden;
            //     padding: 0 5px;
            // }

            // .sg-tag-item {
            //     overflow: hidden;
            //     text-overflow: ellipsis;
            //     white-space: nowrap;
            //     padding: 1px 4px;
            //     display: flex;
            //     align-items: center;
            //     justify-content: center;
            //     display: inline-block;
            //     font-size: 9px;
            //     background: #fff6f6;
            //     border: 1px solid #fff6f6;
            //     color: #f00;
            //     border-radius: 2px;
            // }

            .gmname-box {
                padding: 5px;
                min-height: 38px;
                box-sizing: border-box;
            }

            .gmname {
                width: 100%;
                font-size: 12px;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                /* 限制显示的行数为3行 */
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                text-align: center;
            }

            .price-box {
                width: 100%;
                height: 34px;
                position: absolute;
                left: 0;
                bottom: 0;
                z-index: 1;
                background-color: #fff;

                .price-content {
                    width: 100%;
                    height: 100%;
                    position: relative;

                    .pbg,
                    .pmain {
                        width: 100%;
                        height: 100%;
                        position: absolute;
                    }

                    .pmain {
                        z-index: 2;
                        display: flex;
                        align-items: center;

                        .pml {
                            flex: 1;
                           
                            text-align: center;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;

                            .pmi {
                                color: #fff;
                                position: relative;
                                left: -3px;
                                top: 3px;
                                font-size: 11px;
                            }
                        }

                        .pmr {
                            flex: 1;
                            font-size: 14px;
                            text-align: center;
                            font-weight: bold;
                            color: #f00;
                            position: relative;
                            top: 1px;
                        }
                    }
                }

            }
        }
    }
}
</style>
